<template>
  <div class="pagination">
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="[5, 10, 15]"
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @current-change="onCurrentChange"
      @size-change="onSizeChange"
    />
  </div>
</template>
<script>
export default {
  name: 'PagePagination',
  props: {
    page: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  methods: {
    onCurrentChange(value) {
      this.$emit('update-page', value)
    },
    onSizeChange(value) {
      this.$emit('update-size', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination{
  margin-top: 10px;
  text-align: right;
}
</style>
